<template>
	<view :style="{paddingBottom: paddingBottom + 150 +'px'}">
		<iconTxt></iconTxt>
		<!-- 商品卡片 -->
		<goodsCart :list="cartList" :isEdit="isEdit" @changeCheckOne="changeCheckOneFn" @DelGoods="DelGoodsFn"
			@changeNumber="changeNumberFn" :isDisabled="isDisabled">
		</goodsCart>
		<!-- 提示编辑 -->
		<view class="editBox" v-if="cartList.length==0?false:true" :style="{bottom:paddingBottom + 100 + 'px'}">
			<text>累计共{{ischeckeAll?cartTotal.goodsCount:0}}件商品，可点击</text>
			<u-button v-if="!isEdit" type="success" text="编辑" size="large" class="custom-style" @click="editFn">
			</u-button>
			<u-button v-if="isEdit" type="error" text="完成编辑" size="large" class="custom-style" @click="editFn">
			</u-button>
			<text>按钮进行商品数量修改</text>
			<text></text>
		</view>
		<!-- 商品导航栏 -->
		<view class="goodsNavBox" :style="{bottom:paddingBottom + 50 + 'px'}" v-if="cartList.length==0?false:true">
			<u-checkbox-group>
				<u-checkbox v-model="checkedAll" :checked="ischeckeAll" shape="circle" label="全选" size="20"
					@change="checkboxChange" :disabled="isDisabled">
				</u-checkbox>
			</u-checkbox-group>
			<view class="totalBox">
				<text style="font-size: 28rpx;width: 84rpx;padding-right: 10rpx;color: black;">合计:
				</text>
				<text>¥</text>
				<text style="font-size: 40rpx;">{{cartTotal.goodsAmount}}
				</text>
				<text>.00</text>
			</view>
			<view class="buyNowBox">
				立即购买cartTotal.checkedGoodsAmount
			</view>
		</view>
		<!-- 商品为空 -->
		<view v-if="cartList.length<=0?true:false" class="cartNull">
			<view>
				<image src="http://www.52coding.cc/net163/img/custom-empty-image.276c05f0.png" mode="scaleToFill"
					style="width: 160px;height: 160px;"></image>
			</view>
			<view class="cartNullTxt">
				购物车为空
			</view>
		</view>
		<tobBar :current="3"></tobBar>
	</view>
</template>

<script>
	import {
		cartListApi,
		cartEeleteApi,
		updateApi,
		checkedAPI
	} from "../request/api.js"
	import request from "../request/request.js"
	export default {
		data() {
			return {
				cartList: [],
				checkedAll: [],
				cartTotal: {},
				isEdit: false,
				checkedOne: false,
				checkedGoodsAmount: 0,
				isDisabled: false,
				isCheckNumber: 0,
				paddingBottom: 0,
			}
		},
		methods: {
			// 封装切换商品是否选中状态请求
			checkGoodsFn(num, id) {
				request({
					url: checkedAPI,
					method: "POST",
					data: {
						isChecked: num,
						productIds: id
					},
					successCb: res => {
						this.cartList = res.cartList
						this.cartTotal.goodsAmount = res.cartTotal.checkedGoodsAmount
					}
				})
			},
			checkboxChange(n) {
				// 全选
				this.ischeckeAll ? this.isCheckNumber = 0 : this.isCheckNumber = 1
				// 拼接对象数组中的某属性值,拼接成字符串
				let productId = this.cartList.map((obj) => {
					return obj.product_id
				}).join(",")
				this.checkGoodsFn(this.isCheckNumber, productId)
			},
			// 编辑
			editFn() {
				this.isEdit = !this.isEdit
				this.isDisabled = !this.isDisabled
			},
			// 单选
			changeCheckOneFn(val) {
				val.item.checked ? this.isCheckNumber = 0 : this.isCheckNumber = 1
				this.checkGoodsFn(this.isCheckNumber, `${val.item.product_id}`)
			},
			// 删除商品
			DelGoodsFn(val) {
				request({
					url: cartEeleteApi,
					data: {
						productIds: `${val.id}`
					},
					method: "POST",
					successCb: res => {
						this.cartList = res.cartList
						this.cartTotal.goodsAmount = res.cartTotal.checkedGoodsAmount
					}
				})
			},
			// 步进器
			changeNumberFn(payload, event) {
				request({
					url: updateApi,
					method: "POST",
					data: {
						goodsId: payload.goods_id,
						id: payload.id,
						number: event.value,
						productId: payload.product_id
					},
					successCb: res => {
						console.log(res);
						this.cartList = res.cartList
						payload.checked ? this.cartTotal.goodsAmount = res.cartTotal.goodsAmount : this
							.cartTotal.goodsAmount = res.cartTotal.checkedGoodsAmount
					},
					failCb: err => {
						if (err == "接口发送到后端,但是没有跟后端成功通信") {
							uni.showToast({
								title: "库存不足",
								icon: "error"
							})
						}
						// console.log(err);
					}
				})
			}
		},
		onShow() {
			request({
				url: cartListApi,
				successCb: res => {
					console.log("购物车:", res);
					this.cartList = res.cartList
					this.cartTotal = res.cartTotal
					this.cartTotal.goodsAmount = res.cartTotal.checkedGoodsAmount
				}
			})
		},
		computed: {
			ischeckeAll() {
				let cratList = this.cartList.map(item => item.checked)
				if (cratList.includes(0)) {
					return false
				} else {
					return true
				}
			}
		},
		onLoad() {
			const app = getApp();
			const bottomFixedNeeded = app.globalData.bottomFixedNeeded;
			const bottomDistance = app.globalData.bottomDistance;
			if (bottomFixedNeeded) {
				this.$data.paddingBottom = bottomDistance;

			} else {
				this.$data.paddingBottom = 0;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goodsNavBox {
		width: 100%;
		display: flex;
		padding: 0 32rpx;
		box-sizing: border-box;
		height: 50px;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		background-color: white;

		.totalBox {
			flex: 1;
			text-align: right;
			padding: 0 24rpx 0 0;
			height: 100rpx;
			line-height: 100rpx;
			font-family: "黑体";
			color: red;
			font-size: 24rpx;

		}

		.buyNowBox {
			height: 80rpx;
			color: white;
			line-height: 80rpx;
			background-color: red;
			width: 220rpx;
			border-radius: 50rpx;
			text-align: center;

		}
	}

	.editBox {
		width: 100%;
		height: 50px;
		padding: 16rpx 24rpx;
		font-size: 24rpx;
		font-family: "黑体";
		display: flex;
		align-items: center;
		background-color: #fff7cc;
		color: #f56723;
		box-sizing: border-box;
		position: fixed;

		.custom-style {
			width: auto;
			height: 64rpx;
		}
	}

	.cartNull {
		width: 100vw;
		box-sizing: border-box;
		padding: 32px 0;
		padding-top: 25vh;
		box-sizing: border-box;
		text-align: center;

		.cartNullTxt {
			margin-top: 16px;
			padding: 0 60px;
			color: #969799;
			font-size: 14px;
			line-height: 20px;
		}
	}
</style>
